<template>
  <div>
    <!-- {{ musiclist.tracks[0]}} -->

    <el-table
      :data="sumlist"
      style="width: 100%"
      height="460"
      @row-click="btn"
      :row-class-name="tableRowClassName"
      v-loading="loading"
      element-loading-text="你是要逼疯我啊"
    >
      <el-table-column prop="cdid" label="" width="50"></el-table-column>
      <el-table-column prop="aix" label="操作" width="120">
        <div class="btnys">
          <el-button circle>❤</el-button>
          <el-button circle icon="el-icon-download"></el-button>
        </div>
      </el-table-column>
      <el-table-column prop="name" label="歌曲"> </el-table-column>
      <el-table-column prop="ar[0].name" label="歌手" width="180"> </el-table-column>
      <el-table-column prop="al.name" label="专辑" width="180"> </el-table-column>
      <el-table-column prop="dt" label="时间" width="180">
        <template slot-scope="scope">{{
          scope.row.dt == 1 ? scope.row.dt : $dayjs(scope.row.dt).format("mm:ss")
        }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
let tableData = [
  {
    id: "01",
    like: "❤",
    name: "王小虎",
    address: "专辑名称",
    title: "歌曲名称",
    date: "04.50",
  },
  {
    id: "02",
    like: "❤",
    name: "王小虎",
    address: "专辑名称",
    title: "歌曲名称1",
    date: "04.50",
  },
  {
    id: "03",
    like: "❤",
    name: "王小虎",
    address: "专辑名称",
    title: "歌曲名称23232",
    date: "04.50",
  },
  {
    id: "04",
    like: "❤",
    name: "王小虎",
    address: "专辑名称",
    title: "歌曲名称124141412",
    date: "04.50",
  },
];
import Api from '../lib/api'
import { mapState } from "vuex";
export default {
  name: "musiclist",
  data() {
    return {
      tableData,
      loading: true,
      off:true,
    };
  },
  watch: {
    off: {
      handler(val, one) {
        console.log(val, one);
        this.loading = false;
      },
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      row;
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else if (rowIndex % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    btn(row) {
      let _this=this
      // 切换音乐的aip
      Api.tabmusict(_this,row)
       // 切换音乐的aip
       
      //  console.log(row.playcond);
      // console.log(this.soterid[this.playid]);
      // this.$axios
      //   .get("song/url?" + new Date(), {
      //     //获取歌曲
      //     params: {
      //       id: this.soterid[row.playcond],
      //     },
      //   })
      //   .then((res) => {
      //     // console.log(res.data.data[0].url);
      //     this.$store.commit("uptabmusicp", res.data.data[0].url);
      //   });
      this.$store.commit("tabplay", row.playcond);
    },
  },
  computed: {
    ...mapState(["musiclist", "mp3id", "sumlist", "soterid", "playid"]),
  },
  created() {
    if (this.off) {
       setTimeout(() => {
        let _this=this
        // 获取所有音乐的api
        Api.musiclist(_this)
         
      // let mp3Id = [];
      // console.log(this.mp3id);//这里的数据拿不到
      // 把mp3id 里面的数据 id 进行处理1828132085 生成新的 字符串ID 来获取歌曲
      // this.mp3id.forEach((item) => {
      //   mp3Id.push(item.id);
      // });
      // console.log(mp3Id.join(","));
      // console.log(this.soterid.join(","));
      // let id = this.soterid.join(",");
      // this.$axios
      //   .get("song/url?" + new Date(), {
      //     //获取歌曲
      //     params: {
      //       id: id,
      //     },
      //   })
      //   .then((res) => {
      //     // res.data.data 获取的是歌曲 里面有url
      //     console.log(res.data.data);
      //     this.$store.commit("upmapurl", res.data.data);
      //   }).then(()=>{
      //     this.off=false
      //   });
    }, 1000);
    }
   
  },
};
</script>

<style lang="scss">
.el-table {
  cursor: pointer !important;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: #f5f5f5;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 5px;
  background-color: #f5f5f5;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: rgb(212, 212, 212);
}
.btnys {
  display: flex;
  // width: 200px;
}
</style>
